<template>
  <div class="hot" :style="{'margin-bottom': currentMusic.id? '100px':'50px'}">
    <div class="topTitle">
      <div class="hotsong">
        <div>更新日期：{{this.date |dateFormat}}</div>
      </div>
    </div>
    <div class="hot-title">歌曲列表</div>

    <!-- 音乐列表 -->

  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <!-- 循环音乐列表 -->
    <music-list @play="play"  :newSongs = "showList" :showNum="true"></music-list>
  </van-list>
  </div>
</template>

<script>
import MusicList from '@/components/music-list/music-list.vue'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'Hot',
  data () {
    return {
      date: 0,
      loading: false, // 加载状态
      hotSongs: [], // 热歌榜单
      page: 1, // 控制页数
      pageSize: 20,
      total: 0, // 一共多少条数据
      finished: false
    }
  },
  computed: {
    ...mapState(['currentMusic']),
    showList () {
      if (this.hotSongs.length > 0) {
        // const startPro = (this.page - 1) * 20
        const endPro = this.page * 20
        // const result = this.hotSongs.slice(startPro, endPro)
        return this.hotSongs.slice(0, endPro)
      }
      return []
    }
  },
  created () {
    // this.getHotSongs()
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  },

  methods: {
    // 当前id
    ...mapMutations(['getCurrentMusic']),
    // 加载更多
    async onLoad () {
      const {
        data: res
      } = await this.$http.get('/playlist/detail', {
        params: {
          id: 3778678
        }
      })
      console.log(res)
      // 更新事件
      this.date = res.playlist.updateTime
      const musicList = res.playlist.tracks.map((v, index) => {
        v.song = {
          privilege: res.privileges[index],
          artists: v.ar,
          album: v.al
        }
        return v
      })
      // 关闭提示
      this.$toast.clear()

      // 总数据
      this.total = musicList.length

      this.hotSongs = musicList

      this.loading = false
      // 判断数据是否加载完成
      this.page++
      console.log(this.page)
      if (this.page * 20 >= this.total) {
        this.finished = true
      }
    },

    // 点击播放
    play (e) {
      // console.log(e)
      this.getCurrentMusic(e)
    }
  },

  components: {
    MusicList
  }

}

</script>

<style lang="less" scoped>
  .hot{
    height: 100%;
    margin-bottom: 50px;
  }
  .topTitle {
    width: 100vw;
    height: 39vw;
    background: url('~@/assets/hot.jpg') no-repeat;
    background-size: cover;
    position: relative;

    .hotsong {
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);

      &::before {
        content: '';
        display: inline-block;
        width: 142px;
        height: 67px;
        background: url('~@/assets/SQ.png') no-repeat;
        background-size: 166px 97px;
        background-position: -22px -30px;
      }

      &>div {
        font-size: 13px;
        color: white;
      }
    }
  }

  .hot-title {
    height: 23 px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 13px;
    color: #666;
    background-color: #eeeff0;
  }

</style>
